<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui">
 
<h:head>


</h:head>
<h:body>
<!-- 	<h:form>
		<h:outputText id="txt_count" value="#{itemManageAction.timeReminder}" />
		<p:poll interval="20" listener="#{itemManageAction.calculateTime}" update="txt_count" />
	</h:form> -->
	<h:form>
		<!-- <p:idleMonitor timeout="30">
			<p:ajax event="idle" listener="#{logoutAction.logoutAction}" />
		</p:idleMonitor> -->
		<div style="text-align: right; color: blue">
			<h:outputText id="showName" value="Hello, #{loginAction.userName}  "></h:outputText>
			<p:commandLink id="logout"
				actionListener="#{logoutAction.LogoutAction}">
				<h:outputText value="Logout" style="color:purple" />
			</p:commandLink>
		</div>
		<p:inputTextarea autoResize="false" style="width:100%" column="10" placeholder="Please type here..."
			value="#{itemManageAction.text}">
		</p:inputTextarea>
		<p:outputLabel for="remindTime" value="Reminder"></p:outputLabel> 
		<p:calendar id="remindTime" value="#{itemManageAction.remindTime}" showOn="button" icon="fa fa-calendar"
			pattern="MM/dd/yyyy HH:mm"/>
		<p:growl id="addMessage" showDetail="true" life="3000" />
		<p:commandButton id="itemAddButton" value="Submit"
			actionListener="#{itemManageAction.itemAddAction}" update="@form"></p:commandButton>

		<p:commandButton id="itemHistory" value="Item history" action="#{itemManageAction.itemHistory}" style="float:right;" update="@form"/>		



		<!-- 	<h:form>
		<p:dialog header="Item" modal="true" showEffect="fade" hideEffect="fade" widgetVar="cityDialog" width="200">
			<p:dataList id="displayItem" value="#{itemAddAction.itemList}" var="item">
            <h:outputText value="#{item}" />
       		 </p:dataList>
		</p:dialog>	
		
	</h:form>  -->
		<!-- 	<h:form>
		<p:dataTable>
			<p:column headerText="Date">
				<p:dataList id="displayDate" value="#{itemAddAction.dateList}"
					var="date">
					<h:outputText value="#{date}"></h:outputText>
				</p:dataList>
			</p:column>
			<p:column headerText="Item">
				<p:dataList id="displayItem" value="#{itemAddAction.itemList}"
					var="item">
					<h:outputText value="#{item}"></h:outputText>
				</p:dataList>
			</p:column>
		</p:dataTable>
	</h:form> 
 -->

		<!-- <h:form>
	<h:dataTable var="date" value="#{itemAddAction.dateList}">
		<h:outputText value="#{date}"></h:outputText>
	</h:dataTable>
</h:form> -->

		<p:dataTable id="dataTable" var="itr"
			value="#{itemManageAction.itemList}"
			selection="#{itemManageAction.selectedList}" rowKey="#{itr.itemId}" paginator="true" rows="12" paginatorPosition="bottom">

			<p:column selectionMode="multiple" width="20" /> 
			        <p:column style="width:16px">
            <p:rowToggler />
       	 </p:column>
			<p:column headerText="Date" width="200">
				<h:outputText value="#{itr.date}"></h:outputText>
			</p:column>
			<p:column headerText="Item">
				<h:outputText value="#{itr.text}"></h:outputText>
			</p:column>
			
			<p:rowExpansion>
			<p:panelGrid columns="2" id="itemDetailGrid" columnClasses="label,value">
				 <h:outputText value="Date:" />
                 <h:outputText value="#{itr.date}" ><f:convertDateTime pattern="MM/dd/yyyy HH:mm"/></h:outputText>
                 
                 <h:outputText value="Item:" />
                 <h:outputText value="#{itr.text}" />
                 
                 <h:outputText value="Remind date:" />
                 <h:outputText value="#{itr.remindTime}" > <f:convertDateTime pattern="MM/dd/yyyy HH:mm"/></h:outputText>                 
			</p:panelGrid>			
			</p:rowExpansion>
		
			<f:facet name="footer">
				<p:growl id="doneMessage" showDetail="true" life="3000" />
				<p:commandButton id="done" value="Done"
					actionListener="#{itemManageAction.itemDoneAction}" update="@form" />
				<p:growl id="deleteMessage" showDetail="true" life="3000" />
				<p:commandButton id="delete" value="Delete"
					actionListener="#{itemManageAction.itemDeleteAction}"
					update="@form"></p:commandButton>
			</f:facet>
		</p:dataTable>

		<!-- 	<p:dataTable var="itr" value="#{itemAddAction.itemSet.toArray()}">
		<p:column width="18">
			<p:selectBooleanCheckbox></p:selectBooleanCheckbox>
		</p:column>
		<p:column headerText="Date" width="200">
			<h:outputText value="#{itr.date}"></h:outputText>
		</p:column>
		<p:column headerText="Item">
			<h:outputText value="#{itr.text}"></h:outputText>
		</p:column>
	</p:dataTable>  -->


		<!-- <table>
	<tr>
		<td>
			<p:commandButton id="done" value="Done" ></p:commandButton>
		</td><td></td><td></td><td></td><td></td>
		<td>
			<p:commandButton id="delete" value="Delete"></p:commandButton>
		</td>			
	</tr>
</table> -->



	</h:form>

</h:body>
</html>